<template>
  <div>
    <div slot class="fixed-box">
      <div class="move-box">
        <div class="header" ref="move-header-box" v-dragParent>
          <p>转发动态</p>
          <img @click="closeDialog" :src="require('@assets/img/login-chacha.png')" alt />
        </div>
        <div>
          <textarea
            v-model="content"
            placeholder="说点什么"
            id=""
            cols="30"
            rows="10"
          ></textarea>
          <p
            class="content-length"
            :style="{ color: contentLengthCom < 0 ? '#f00' : '#333' }"
          >
            {{ contentLengthCom }}
          </p>
        </div>
        <!-- 未登录情况下 -->
        <div class="nologin-content">
          <div class="button-box">
            <button @click="save" class="phone-button" type="button">转发</button>
            <button @click="closeDialog" class="register-button" type="button">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {eventForward} from '@/api'
import {mapGetters} from "vuex"
export default {
  name: "transmit",
  props:{
    isTransmitDialog:{
      type:Boolean,
      required:true
    },
    // 用户 id
    // uid:{
    //   type:String,
    //   required:true
    // },
    // 动态 evId
    evId:{
      type:Number,
      required:true
    }
  },
  data() {
    return {
      content: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    contentLengthCom() {
      return 140 - this.content.length;
    },
  },
  methods: {
    save(){
      let config = {
        forwards: this.content,
        evId: this.evId,
        uid: this.userInfo.profile.userId
      };
      eventForward(config).then(data=>{
        this.$Notification(data.msg||"转发成功",'success')
        this.$emit("update:isTransmitDialog",false)
        if(this.$route.query.id == this.userInfo.profile.userId){
          this.$emit("init")
        }
      })
    },
    closeDialog() {
      this.$emit("update:isTransmitDialog",false)
    }
  },
};
</script>


<style lang="scss" scoped>
.content-length {
  margin: 0 20px;
  text-align: right;
  font-size: 12px;
}
textarea {
  margin-left: 20px;
  margin-top: 20px;
  width: calc(100% - 40px);
  height: 150px;
  // margin-bottom:20px;
  border-color: rgb(217, 217, 217);
  border-radius: 3px;
  box-sizing: border-box;
  padding: 6px;
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  // width:;
}

.resetCode {
  width: 100%;
  font-size: 12px;
  color: #0c73c2;
  margin-top: 10px;
  margin-right: 10px;
  text-align: right;
  cursor: pointer;
}
.margin-top-20 {
  margin-top: 10px;
}
.code_message_warning {
  font-size: 12px;
  color: #999;
  .you_phone {
    color: #666;
  }
  .color_black {
    color: #333;
  }
  .txt {
  }
}
.code_input_box {
  margin-top: 20px;
  display: flex;
  .code_input {
    color: #666;
    transition: all 1s;
    margin: 0 8px;
    border-top: none;
    border-left: none;
    border-right: none;
    width: 40px;
    text-align: center;
    font-size: 24px;
  }
}
.fixed-box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2001;
  .move-box {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.8);
    position: absolute;
    left: calc(50% - 265px);
    // right: 0;
    top: calc(50% - 186px);
    // bottom: 0;
    // margin: auto;
    width: 530px;
    height: 300px;
    .header {
      -moz-user-select: none;
      -khtml-user-select: none;
      user-select: none;
      cursor: move;
      background-color: #2d2d2d;
      padding: 0 20px;
      font-weight: 600;
      color: #fff;
      display: flex;
      justify-content: space-between;
      height: 38px;
      font-size: 14px;
      line-height: 38px;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-right: -5px;
      }
    }
    // 未登录情况下
    .nologin-content {
      position: relative;
      box-sizing: border-box;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      .margin-auto {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .error-message {
        font-size: 12px;
        color: #333;
        margin-top: 5px;

        display: flex;
        align-items: center;
        .img {
          margin-right: 7px;
          margin-top: 0;
          width: 14px;
          height: 14px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .input-box {
        display: flex;
        flex-direction: column;

        .label {
          font-size: 12px;
          margin: 10px 0;
          color: #333;
        }

        input {
          width: 206px;
          height: 19px;
          margin: 0;
          padding: 5px 6px 6px;
          border: 1px solid #cdcdcd;
          border-radius: 2px;
          box-sizing: content-box;
          font-size: 12px;
          color: #333;
          font-family: Arial, Helvetica, sans-serif;
        }
      }
      .img {
        margin-top: 10px;
        width: 200px;
      }
      .button-box {
        display: flex;
        .phone-button,
        .email-button,
        .register-button {
          width: 80px;
          height: 30px;
          border: 0;
          outline: 0;
          border-radius: 3px;
          margin-top: 10px;
          font-size: 12px;
          color: #fff;
          cursor: pointer;
          margin-left: 20px;
        }
        .phone-button,
        .email-button {
          background-image: linear-gradient(#4da1e0, #1d6ebe);
          border: 1px solid #3984ce;
        }
        .register-button {
          border: 1px solid #c4c4c4;
          background-image: linear-gradient(#ffffff, #f1f1f1);
          color: #333;
        }
      }
    }
  }
}
.color-red {
  color: #e33232;
}
.isPhoneError {
  border: 1px solid #f08b8b !important;
  color: #c20c0c !important;
}
</style>